<script setup>
import {onBeforeMount, reactive, toRefs, ref, onMounted} from "vue"
import {addUserHandler,updateUserHandler} from "../../api/user.js";
import {addClusterHandler as addHandler,updateClusterHandler as updateHandler} from "../../api/cluster.js";
import {ElMessage} from "element-plus";

const  data = reactive({
  itemForm:{
  }
})
const props=defineProps({
  // 判断当前时创建还是更新
  method: {
    type: String,
    default: "Create"
  },
  itemForm: {
    type: Object
  }
})

onMounted(()=>{
  // 把对象转成一个字符串
  const  jsonString = JSON.stringify(props.itemForm)
  // 在把字符串转换成json,最后赋值data.userForm
  data.itemForm = JSON.parse(jsonString)
})

const emits=defineEmits(["rollback"])
const  {itemForm} = toRefs(data)
const itemFormRef = ref()
let loading = ref(false)

// 实现清空表单的逻辑
const clear =()=>{
  itemFormRef.value.resetFields()
}

// 表单校验功能
const rules = reactive({
  id: [
    { required: true, message: '请输入集群ID', trigger: 'blur' },
  ],
  displayName: [
    { required: true, message: '请输入集群别名', trigger: 'blur' },
  ],
  city: [
    { required: true, message: '请输入集群位置', trigger: 'blur' },
  ],
  kubeconfig: [
    { required: true, message: '请输入集群的kubeconfig配置', trigger: 'blur' },
  ],
})

// 添加用户的逻辑
const submit =()=>{

  // 触发执行数据校验
  itemFormRef.value.validate((valid) => {
    if(valid) {
        loading.value=true
        console.log("查看加载",loading.value)
      if (props.method === "Create"){
        addHandler(data.itemForm).then((response)=>{
          ElMessage({
            type: 'success',
            message: response.data.message,
          })
          loading.value=false
          //emits("rollback")

        })
      }else {
        updateHandler(data.itemForm).then((response)=>{
          ElMessage({
            type: 'success',
            message: response.data.message,
          })
          loading.value=false
          emits("rollback")

        })
      }

    }else{
        ElMessage({
          type: 'warning',
          message: '请完善表单内容',
        })
    }
  })
}

</script>

<template>
  <el-form  label-width= "90px" ref="itemFormRef"  :rules="rules"  :model="itemForm" >
    <div class="class-info">
      <!-- 集群配置基础信息   -->
      <div>
        <el-form-item  class="form-item"  prop="id" label="集群ID" required >
          <el-input   placeholder="请输入集群ID" v-model="itemForm.id" autocomplete="off" :disabled="props.method==='Edit'" />
        </el-form-item>
        <el-form-item class="form-item" prop="displayName" label="集群名称" required>
          <el-input  placeholder="请输入集群别名"  v-model="itemForm.displayName" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="" label="位置" >
          <el-col :span="8">
            <el-form-item prop="city" label="" required>
              <el-input  placeholder="所在城市" v-model="itemForm.city" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="1">-</el-col>
          <el-col :span="6">
            <el-form-item  prop="district" label="" >
              <el-input  placeholder="所在区/县" v-model="itemForm.district" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-form-item>
      </div>
      <!-- kubeconfig   -->
      <div>
        <el-form-item   prop="kubeconfig" label-width= "10px" style="width: 600px" required >
          <el-input placeholder="kubeconfig" :rows="7" type="textarea"  v-model="itemForm.kubeconfig" autocomplete="off" />
        </el-form-item>
      </div>
    </div>

    <div class="dialog-footer">
      <el-button @click="clear()">清空</el-button>
      <el-button type="primary" @click="submit()" >
        {{ props.method === "Create"?"添加":"更新" }}
      </el-button>
    </div>
  </el-form>
</template>

<style scoped>
.form-item{
  width: 400px;
  margin: 0 auto 20px 0;
}
.dialog-footer{
  display: block;
  margin-top: 20px;
}
.class-info {
  display: flex;
  flex-direction: row;
}
</style>